<template>
	<view class="jianbao">
		<view class="drop">
			<navigator url="/components/components/power" hover-class="navigator-hover"  class="drleft">
				<svg class='icon' aria-hidden='true' >
					<use xlink:href='#icon-standard'></use>
				</svg>
				<view class="power">权限内∨</view>
			</navigator>
			<navigator url="/components/components/power" hover-class="navigator-hover"  class="drright">
				<view class="time">2021年9月</view>
			</navigator>
		</view>
		<!-- 销售签单 -->
		<view class="header">
			<!-- 标题 -->
			<view class="title">
				▶ {{title}}销售签单 ◀
			</view>
		</view>	
		<!-- 客户数据 -->
		<card :cards="cards"/>
		
		<!-- 客户提醒 -->
		<view class="header">
			<!-- 标题 -->
			<view class="title">
				▶ {{title}}客户提醒 ◀
			</view>
		</view>	
		<!-- 客户数据 -->
		<card :cards="cards"/>
		
		<!-- 跟单提醒 -->
		<view class="header">
			<!-- 标题 -->
			<view class="title">
				▶ {{title}}跟单提醒 ◀
			</view>
		</view>	
		<!-- 客户数据 -->
		<card :cards="cards"/>

	</view>
</template>

<script>
	import Title from './common/Title.vue';
	import Card from './common/Card.vue';
	import Detail from './common/Detail.vue';
	import { ref , reactive } from "vue";
	import request from '@/service/request1.js'
	export default {
		components: {
			Title,Card,Detail
		},
		
		setup(){
			const title = ref("加载中...")
			const cards = reactive([])
			

			uni.request({
				url: 'http://nboa.jzsoft.cn:777/pro/api/workbench/deskmode?modetype=jianbao', 
				method: 'POST',
				data: {
					dateRang: ["2021-09-01", "2021-09-30"],
					selectType: ""
				},
				success: res => {
					title.value = res.data.result.title  // 标题赋值
					const cardsdata = res.data.result.data // 卡片数据
					 cardsdata.forEach(e => {  //  卡片数据赋值
					    cards.push(e);
					  });
					
				}
			});
			
			return{
				title,
				cards,
				
				
			}
		}
		}
</script>

<style scoped lang="scss">
	// 下拉菜单栏
		.drop {
			height: 56 * 2rpx;
			border-bottom: 8 * 2rpx solid #F2F2F7;
			padding: 0 16 * 2rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: $uni-bg-color;
			.drleft {
				display: flex;
				align-items: center;
				width: 300rpx;
				
				.icon {
					width: 30 * 2rpx;
					height: 30 * 2rpx;
					border-radius: 5 * 2rpx;
				}
				.power{
					width: 300rpx;
					margin-left: 5rpx;
				}
			}
			.drright {
				display: flex;
			}
		}
		
		// 标题
		.header{
			padding: 16*2rpx 0;
			background-color: #ffffff;
			.title{
				text-align: center;
			}
		}
</style>
